<template>
  <div>
    <h2>文件预览</h2>
    <div class="docx" v-if="isDocx">
      <input type="file" @change="changeHandle" />
      <vue-office-docx :src="src" style="height: 100vh;" @rendered="rendered" />
    </div>
    <div class="xlsx" v-if="isXlsx">
      <input type="file" @change="changeHandle" />
      <vue-office-excel :src="src" style="height: 100vh;" @rendered="rendered" />
    </div>
    <div class="pdf" v-if="isPdf">
      <input type="file" @change="changeHandle" />
      <vue-office-pdf :src="src" style="height: 100vh;" @rendered="rendered" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'

import VueOfficePdf from '@vue-office/pdf'
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

// console.log(vueOffice,'123')
let isDocx = ref(true)
let isXlsx = ref(false)
let isPdf = ref(false)

// 在线预览
let src = ref('')
// 渲染方法
const rendered = () => {
  console.log('渲染完成')
}

const getFileType = (fileName)=>{
  const fileType = fileName.split('.').pop().toLowerCase()
  // console.log(fileType,'文件名称')
  // return fileType
  if(fileType && fileType === 'xlsx'){
    isXlsx.value = true
    isDocx.value = false
    isPdf.value = false
  } else if(fileType && fileType === 'pdf'){
    isPdf.value = true
    isDocx.value = false
    isXlsx.value = false
  } else {
    console.log('上传的是docx文件')
    isPdf.value = false
    isXlsx.value = false
  }
}

// 文件上传 docx文件类型
// onMounted(() => {
const changeHandle = (event) => {
  let file = event.target.files[0]
  // console.log(file, '11111')
  getFileType(file.name)
  let fileReader = new FileReader()
  fileReader.readAsArrayBuffer(file)
  fileReader.onload = (loadEvent) => {
    console.log('加载成功', loadEvent)
    src.value = loadEvent.target.result;
  }
}
// })


</script>

<style lang="scss" scoped></style>